<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" href="./css/bootstrap.css" />
        <script type="text/javascript" src="./js/jquery.min.js"  ></script>
		<script type="text/javascript" src="./js/bootstrap.js"></script>
		
        <link rel="stylesheet" href="css/personal.css">
        <style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			ul li {
				list-style: none;
				float: left;
				margin-left: 60px;
				line-height: 60px;
			}
			
			a {
				text-decoration: none;
				color: rgb(229, 35, 61);
			}
			
			ul li a:hover {
				color: orange;
				text-decoration: none;
			}
			.ok{
				height: 36px;
         background-color: #863c13;
			}
			.j{
				
              font-size: 20px;
        float: left;
         margin-left:500px;
          height: 36px;
			}
			.center{
				width: 1200px;
              height: 36px;
              margin: 0 auto;
              line-height: 36px;
			}
			.hhh{
				color: rgb(236, 242, 232);
               font-size: 19px;
			   line-height: 35px;
                 float: right;
			}
			.hhh a{
				color: #f4ecec;
                margin: 0 5px;
                 font-size: 18px;
			}

		</style>

	</head>
	<body>

        <div class="container-fluid px-0">
            <div class="ok">
                <div class="center">
                    <div class="j" style="color: rgb(230, 237, 237);">
                        <b>校园失物招领系统</b>
    
    
                    </div>
                    <div class="hhh">
    
                        <a href="denglu.html">登录</a>
                        <a href="zhuce.html">免费注册</a>
                        <a href="#">购物车</a>
                        <a href="#">我的订单</a>
    
                    </div>
    
                </div>
            </div>
    
            <div class="w-100  d-flex justify-content-center"
                style="height: 60px;background-color:#1d1d22;min-width: 800px;">
                <div class="" style="color: white;">
                    <ul class="">
                        <li>
                            <a href="gui.html">首页</a>
                        </li>
                        <li>
                            <a href="fxx_GGXX.html">公告信息</a>
                        </li>
                        <li>
                            <a href="shiwu1.html">失物信息</a>
                        </li>
                        <li>
                            <a href="zhaoling1.html">招领信息</a>
                        </li>
                        <li>
                            <a href="demo00.html">交流论坛</a>
                        </li>
                        <li>
                            <a href="liuyan.html">留言反馈</a>
                        </li>
                        <li>
                            <a href="personal.html">个人中心</a>
                        </li>
                        <li>
                            <a href="./后台/index.html">后台管理</a>
                        </li>
    
                    </ul>
    
                </div>
    
            </div>
        </div>

         <!-- ==============================boostrap轮播图 ========================================================-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="margin-bottom: 20px;">
        <!-- 这是下方图片跳转选项 填几个转第几个【索引】-->
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
            
        </ol>

        <!-- 轮播的图片 -->
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="./img/tu1.jpg" class="d-block w-100" style="height: 200px;" alt="...">
            </div>
            <div class="carousel-item">
                <img src="./img/tu2.jpg" class="d-block w-100" style="height: 200px;"  alt="...">
            </div>
            <div class="carousel-item">
                <img src="./img/tu4.jpg" class="d-block w-100" style="height: 200px;"  alt="...">
            </div>
        </div>

        <!-- 左右的上下跳转 -->
        <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </button>
    </div>
    <!-- ======= 轮播图 --end-- ==================================================================-->
		
		<div class="container" >
            <div class="mt-2 py-2 bg-zong text-center text-white" id="grzx">

                <p class="m-0">USER/CENTER</p>
    
                <p class="m-0" >个人中心</p>
    
            </div>
            <div id="znr" class="my-3 d-flex">

                <div class="znrlef text-center" style="width: 15%;">
                    
    
                    <div class="grzx py-2 znrlefStyle " id="yuan">个人中心</div>
    
                    <div class="myfb py-2 text-zong" id="yuan">我的发布</div>
    
                    <div class="mysc py-2 text-zong" id="yuan">我的收藏</div>
    
                </div>
    
                <div class="zn" style="width: 85%;">
    
                    <div class="zn1 p-3">
    
                        <form action="#" id="bgn">
    
                            <table class="w-100 bg-white">
    
                                <tr>
    
                                    <td><label for="username" id="abc">用户名</label></td>
    
                                    <td><input type="text" id="username" class="w-100"></td>
    
                                </tr>
    
                                <tr>
    
                                    <td><label for="userpwd" id="abc">密码</label></td>
    
                                    <td><input type="password" id="userpwd" class="w-100"></td>
    
                                </tr>
    
                                <tr>
    
                                    <td><label for="name" id="abc">姓名</label></td>
    
                                    <td><input type="text" id="name" class="w-100"></td>
    
                                </tr>
    
                                <tr>
    
                                    <td><label for="sex" id="abc">性别</label></td>
    
                                    <td><select id="sex" class="w-100" style="height: 30px;">
    
                                            <option value="男" selected>男</option>
    
                                            <option value="女">女</option>
    
                                        </select></td>
    
                                </tr>
                                <tr id="tp">
                                    <td colspan="2"></td>
                                </tr>
                                <tr>
                                    <td></td>
                                    <td><button>上传图片</button></td>
                                </tr>
                                <tr>
    
                                    <td><label for="tel" id="abc">手机</label></td>
    
                                    <td><input type="number" id="tel" class="w-100"></td>
    
                                </tr>
    
                            </table>
    
                           
    
                        </form>
                        
                        <div class="p-3">
    
                            <button type="button" class="btn btn-warning text-white">更新信息</button>

                           <a href="gui.html"> <button type="button" class="btn btn-danger">退出登录</button></a>

                        </div>
    
                    </div>
    
                    <div class="zn zn2 d-none" style="width: 85%;">发布</div>
    
                    <div class="zn zn3 d-none" style="width: 85%;">收藏</div>
    
                </div>
    
            </div>
    
        </div>
        </div>
		
		
	</body>
    <script>
        $(function(){
    $('.grzx').click(function(){
        $(this).removeClass("text-zong").addClass("znrlefStyle").siblings().removeClass ("znrlefStyle").addClass('text-zong');
        $(".zn1").removeClass ("d-none").addClass('d-block').siblings().removeClass ("d-block").addClass('d-none');
    });
    $('.myfb').click(function(){
        $(this).removeClass("text-zong").addClass("znrlefStyle").siblings().removeClass ("znrlefStyle").addClass('text-zong');
        $(".zn2").removeClass ("d-none").addClass('d-block').siblings().removeClass ("d-block").addClass('d-none');
    });
    $('.mysc').click(function(){
        $(this).removeClass("text-zong").addClass("znrlefStyle").siblings().removeClass ("znrlefStyle").addClass('text-zong');
        $(".zn3").removeClass ("d-none").addClass('d-block').siblings().removeClass ("d-block").addClass('d-none');
    });

})
    </script>
</html>
